<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="p" class="111">
    Example: <p>italic</p>
    and <b>bold</b>
</div>
<div id="p2">Example: <p>italic</p> and <b>bold</b></div>
<div id="app"><h1>Hello Range1</h1></div>
<div id="app2"></div>
    <script>
      console.log(p.childNodes);
      for (let i  of p2.childNodes){
        console.log(i.nodeType);
      } for (let i  of p2.children){
        console.log(i);
      }

      let range = new Range();
      range.setStart(p,0)
      range.setEnd(p2.firstChild,3)
      console.log(range);
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(range);
      let range2 = new Range();
      range2.selectNode(document.querySelector("#app"))
      console.log(range2);
      setTimeout(()=>{
          console.log(document.getSelection().toString());
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(range2)
        document.querySelector("#app2").appendChild(document.getSelection().getRangeAt(0).cloneContents())
      },3*1000)
    </script>
</body>
</html>
